<template>
  <div>
    <!-- 添加管理员 -->
    <el-button type="primary" @click="add"> 添加管理员+ </el-button>
    <el-drawer v-model="drawer" title="添加管理员" :with-header="false">
      <span class="addTop" v-if="type === 1">添加管理员</span>
      <span class="addTop" v-else>修改管理员信息</span>
      <el-form ref="form" :model="form">
        <el-form-item label="账号">
          <el-input v-model="form.adminname" placeholder="adminname">
          </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="password"
            show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.role" placeholder="请选择角色">
            <el-option :value="1" label="管理员" />
            <el-option :value="2" label="普通用户" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限">
          <el-tree
            ref="mytree"
            :props="props"
            :data="treeData"
            node-key="label"
            :default-checked-keys="defaultCheckedKeys"
            show-checkbox
            default-expand-all
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="flex: auto">
          <el-button type="info" @click="reset">取消</el-button>
          <el-button type="primary" @click="addOK" v-if="type === 1"
            >确定</el-button
          >
          <el-button type="primary" @click="editOK" v-else>确认修改</el-button>
        </div>
      </template>
    </el-drawer>
    <el-table :data="pageList" style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="adminname"
        label="姓名"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column label="权限" width="180" align="center">
        <template #default="scope">
          <div style="display: flex">
            <el-tag
              :type="scope.row.role === 1 ? '' : 'success'"
              style="margin: 0 auto"
            >
              {{ scope.row.role === 1 ? "管理员" : "普通用户" }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <!-- 修改内容 -->
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <!-- 删除内容 -->
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="list.length"
      v-model:current-page="page"
    />
  </div>
</template>

<script>
import {
  getAdminList,
  addAdmin,
  editAdmin,
  delAdmin,
} from "../../service/admin.js";
import { ElMessage } from "element-plus";
import { routes } from "../../router/index.js";

export default {
  data() {
    return {
      list: [], // 管理员列表
      page: 1, // 当前页码
      drawer: false,
      type: 1, // 1：添加状态  2：修改状态
      form: {
        adminname: "",
        password: "",
        role: 1,
        checkedKeys: [], // 当前用户拥有的功能 (权限)
      },
      props: {
        // 权限
        label: "label", // 树状组件是通过找到数据中的label属性来决定显示的数据
        children: "children", // 树状组件通过数据中的children属性决定显示的下一级数据
      },

      // treeData: [
      //   // 权限列表
      //   {
      //     id:10,
      //     name:"aaa",
      //     label: "账户管理",
      //     children: [
      //       {
      //         id:11,
      //         name:"aaa1",
      //         label: "管理员列表",
      //       },
      //     ],
      //   },
      //   {
      //     id:20,
      //     name:"bbb",
      //     label: "轮播图管理",
      //     children: [
      //       {
      //         id:21,
      //         name:"bbb1",
      //         label: "轮播图管理列表",
      //       },
      //     ],
      //   },
      //   {
      //     id:"30",
      //     name:"ccc",
      //     label: "产品管理",
      //     children: [
      //       {
      //         id:31,
      //         name:"ccc1",
      //         label: "产品列表",
      //       },
      //       {
      //         id:32,
      //         name:"ccc2",
      //         label: "秒杀列表",
      //       },
      //       {
      //         id:33,
      //         name:"ccc3",
      //         label: "推荐列表",
      //       },
      //       {
      //         id:34,
      //         name:"ccc4",
      //         label: "筛选列表",
      //       },
      //     ],
      //   },
      // ],
      defaultCheckedKeys: ["账户管理", "轮播图列表"], // 默认显示的权限
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getSelectedNode() {
      // 目的：获取选中子节点的路由对象(父节点)
      // 获取用户选择的节点
      let list = this.$refs.mytree.getCheckedNodes(true);
      console.log(list);
      // 根据子节点找到对应的父节点(遍历整个的treeData，查看哪个节点的子节点的label和选中的子节点的label相等，就把这个父节点存起来，并把这个选中的子节点放到父节点的children里面)
      let temp = []; // 存放选中的父节点的label，不能重复存放
      let result = []; // 存放选中的节点和子节点
      list.forEach((item) => {
        // item 选中的每一个子节点
        let parentNode = this.treeData.find((item1) => {
          // item1 路由表里的每一个路由对象
          // item2 每一个路由对象的子节点
          return item1.children.some((item2) => item2.label === item.label);
        });
        console.log(parentNode);
        if (!temp.includes(parentNode.label)) {
          temp.push(parentNode.label);
          result.push({
            path: parentNode.path,
            label: parentNode.label,
            children: [item],
          });
        } else {
          result
            .find((ritem) => ritem.label === parentNode.label)
            .children.push(item);
        }
      });
      console.log(result);
      this.form.checkedKeys = result;
      // console.log(temp);
      // console.log(this.form.checkedKeys);
      // this.$refs.mytree.setCheckedKeys([]); // 清除树状组件（权限）的选中状态
    },
    handleEdit(index, row) {
      this.drawer = true;
      // console.log(index, row);
      this.type = 2; // 修改状态
      this.form.adminname = row.adminname;
      this.form.password = row.password;
      this.form.role = row.role;
      if (this.$refs.mytree) {
        this.$refs.mytree.setCheckedKeys([]);  // 清除权限的选中状态
      }
      let arr = []; // 存储
      row.checkedKeys.forEach((item) => {
        if (item.children) {
          item.children.forEach((item1) => {
            arr.push(item1.label);
          });
        }
      });
      console.log(arr);
      this.defaultCheckedKeys = arr;
    },
    handleDelete(index, row) {
      // console.log(index, row);
      delAdmin({ adminid: row.adminid }).then((res) => {
        // console.log(res);
        if (res.code === "200") {
          confirm("您确定要删除吗？？");
          this.getList();
        }
      });
    },
    add() {
      this.reset();  // 修改之后，要添加管理员时，各种选项是空的
      if (this.$refs.mytree) {
        this.$refs.mytree.setCheckedKeys([]);  // 清除权限的选中状态
      }
      this.type = 1;
      this.drawer = true;
      // this.defaultCheckedKeys = []; // 只能清除默认选中的选项
    },
    addOK() {
      // 添加管理员
      // 要在addOK、editOK这样的方法中才能
      if (
        this.form.adminname === "" ||
        this.form.password === "" ||
        this.form.role === ""
      ) {
        ElMessage({
          message: "内容有误，请重新输入",
          type: "warning",
        });
        return;
      }
      this.getSelectedNode();
      // console.log(this.$refs.mytree.getCheckedNodes(true)); // getCheckedNodes(true) 返回当前选中节点的子节点
      // this.$refs.mytree.setCheckedKeys([]); // 清除树状组件选中后的状态

      addAdmin(this.form).then((res) => {
        // console.log(res)
        if (res.code === "200") {
          ElMessage({
            message: "添加管理员成功",
            type: "success",
          });
          this.getList();
        }
        this.reset();
      });
    },
    editOK() {
      this.getSelectedNode();
      // 确认修改数据  (只能修改角色和权限)
      editAdmin(this.form).then((res) => {
        if (res.code === "200") {
          this.getList();
        }
        // console.log(this.$refs.mytree.getCheckedNodes(true)); // 返回当前选中节点的子节点
        // this.$refs.mytree.setCheckedKeys=this.form.checkedKeys; // 清除树状组件的选中状态
        this.reset(); // 添加修改后，复位数据
      });
    },
    getList() {
      getAdminList().then((res) => {
        if (res.code === "200") {
          this.list = res.data;
        }
      });
    },
    reset() {
      // 添加修改取消后，复位数据
      this.drawer = false;
      this.form.adminname = "";
      this.form.password = "";
      this.form.role = "";
    },
  },

  computed: {
    pageList() {
      return this.list.slice((this.page - 1) * 10, this.page * 10);
    },
    treeData() {
      // 深拷贝的原因：防止原始数据被修改
      return JSON.parse(JSON.stringify(routes[2].children));
    },
  },
};
</script>
<style scoped>
.addTop {
  display: block;
  margin-bottom: 20px;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
